<template>
  <div>
    <Modal
      :value="value"
      title="施工工序"
      @on-visible-change="handleVisibleChange"
      :styles="{top: '40px'}"
    >
      <div class="button-group clearfix">
        <Button v-if="!isEdit" type="primary" @click="hanldeEditWorkClick">编辑工序</Button>
        <Button v-if="isEdit" type="primary" @click="cancelEditWork">完成</Button>
        <Button type="primary" ghost @click="handleOpenAddModalClick">新增工序</Button>
      </div>
      <Table ref="workTableRef" :columns="tableColumns" :data="workList">
        <template slot-scope="{ row, index }" slot="work">
          <Input v-if="row.isEdit" v-model="row.nodeName"></Input>
          <span v-else>{{ row.nodeName }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="handleEditClick(row,index)"
            v-if="!row.isEdit"
          >编辑</Button>
          <Button
            v-else
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="handleCompleteClick(row,index)"
          >完成</Button>
          <Button
            type="error"
            size="small"
            style="margin-right: 5px"
            @click="handleDelClick(row,index)"
          >删除</Button>
        </template>
      </Table>
      <div class="page-wrapper clearfix">
        <Page
          :total="total"
          size="small"
          show-sizer
          show-total
          :current="page"
          @on-change="handlePageChange"
          @on-page-size-change="handlePageSizeChange"
        />
      </div>
      <div slot="footer">
        <Button @click="hanldeCloseClick" type="primary">关闭</Button>
      </div>
    </Modal>

    <ModalAddWork
      v-model="addWordModalVisiable"
      :nodeId="nodeId"
      @on-save-success="handleAddSuccess"
    />
  </div>
</template>

<script>
import checkboxRow from './checkbox-expand.vue';
import ModalAddWork from './modal-addwork';
import {
  getNodeWorks,
  checkWorkForm,
  uncheckWorkForm,
  delWork,
  renameWork
} from '@/api/checkout.js';

const actionColum = {
  title: '操作',
  slot: 'action',
  width: 150,
  align: 'center'
};

// const expandColum = {
//   type: 'expand',
//   width: 50,
//   render: (h, params) => {
//     return h(checkboxRow, {
//       props: {
//         row: params.row
//       },
//       on: {
//         'checkbox-change': (id, select) => {
//           console.log(id, select);
//           // const selectForm = params.row.reports.find(item => {
//           //   return item.id === id;
//           // });
//           // selectForm.select = select;
//           console.log(row);
//           console.log(this);
//           if (select) {
//             this.checkWorkForm(id);
//           } else {
//             this.uncheckWorkForm(id);
//           }
//         }
//       }
//     });
//   }
// };

export default {
  model: {
    prop: 'value',
    event: 'on-visible-change'
  },
  props: {
    value: Boolean,
    nodeId: Number | String
  },
  components: {
    ModalAddWork
  },
  data () {
    return {
      isEdit: false,

      workList: [
        // {
        //   id: '1',
        //   nodeName: '工序名1',
        //   _expanded: false,
        //   isEdit: false,
        //   reports: [
        //     {
        //       id: '1',
        //       alias: '表名1',
        //       select: true
        //     },
        //     {
        //       id: '2',
        //       alias: '表名2',
        //       select: true
        //     },
        //     {
        //       id: '3',
        //       alias: '表名3',
        //       select: true
        //     }
        //   ]
        // }
      ],

      tableColumns: [
        {
          title: '工序名称',
          key: 'work',
          slot: 'work'
        }
      ],

      expandColum: {
        type: 'expand',
        width: 50,
        render: (h, params) => {
          return h(checkboxRow, {
            props: {
              row: params.row
            },
            on: {
              'checkbox-change': (id, select) => {
                if (select) {
                  this.checkWorkForm(params.row, id);
                } else {
                  this.uncheckWorkForm(params.row, id);
                }
              }
            }
          });
        }
      },

      // 选择工序modal
      addWordModalVisiable: false,

      total: 100,
      page: 1,
      pageSize: 10
    };
  },
  watch: {
    value: {
      handler: function (val) {
        if (val) {
          this.getNodeWorks();
        } else {
          if (this.isEdit) {
            this.cancelEditWork();
          }
        }
      },
      immediate: true
    }
  },
  methods: {
    async getNodeWorks () {
      try {
        const data = {
          nodeId: this.nodeId,
          pageNum: this.page,
          pageSize: this.pageSize
        };
        const resp = await getNodeWorks(data);
        const list = resp.data.data;
        this.total = resp.data.total;

        list.forEach(item => {
          this.$set(item, '_expanded', !!this.isEdit);
          this.$set(item, 'isEdit', false);

          item.reports.forEach(report => {
            this.$set(report, 'select', !!report.use);
          });
        });

        this.workList = list;
        // console.log('工序列表 res=>', resp);
      } catch (error) {
        console.error(error);
      }
    },
    handleVisibleChange (visible) {
      this.$emit('on-visible-change', visible);
    },
    hanldeEditWorkClick () {
      this.workList.forEach(item => {
        item._expanded = true;
      });
      this.isEdit = true;
      this.tableColumns.push(actionColum);
      this.tableColumns.unshift(this.expandColum);
    },
    cancelEditWork () {
      this.workList.forEach(item => {
        item._expanded = false;
      });
      this.isEdit = false;
      this.tableColumns.pop();
      this.tableColumns.shift();
    },
    handleEditClick (row, index) {
      row.isEdit = true;
    },
    async handleCompleteClick (row, index) {
      const data = {
        // nodeId: row.nodeId,
        id: row.nodeId,
        nodeName: row.nodeName
      };
      // console.log('修改工序名称 req=>', data);
      await renameWork(data);

      row.isEdit = false;
      this.getNodeWorks();
    },
    async handleDelClick (row, index) {
      const data = {
        nodeId: row.nodeId
      };

      // console.log('删除工序 req=>', data);
      await delWork(data);
      // console.log('删除工序 res=>', resp);
      this.getNodeWorks();
    },
    handleOpenAddModalClick () {
      this.addWordModalVisiable = true;
    },
    hanldeCloseClick () {
      this.$emit('on-visible-change', false);
    },
    handlePageChange (page) {
      this.page = page;
      this.getNodeWorks();
    },
    handlePageSizeChange (pageSize) {
      this.pageSize = pageSize;
      this.getNodeWorks();
    },
    handleAddSuccess () {
      this.getNodeWorks();
    },
    async checkWorkForm (row, reportId) {
      try {
        const data = {
          nodeId: row.nodeId,
          reportId: reportId
        };

        await checkWorkForm(data);
        this.getNodeWorks();
      } catch (error) {
        console.error(error);
      }
    },
    async uncheckWorkForm (row, reportId) {
      try {
        const data = {
          nodeId: row.nodeId,
          reportId: reportId
        };

        await uncheckWorkForm(data);
        this.getNodeWorks();
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.button-group {
  margin-bottom: 14px;
  .ivu-btn {
    float: right;
    margin-left: 10px;
  }
}
/deep/ .ivu-table-expanded-cell {
  padding: 5px 50px;
}
/deep/ .ivu-modal-body {
  padding-bottom: 5px;
}
.page-wrapper {
  .ivu-page {
    float: right;
    margin: 10px 0;
  }
}
</style>
